<template>
  <!-- 待下发 -->
  <div class="to-be-issued">
    <el-form :model="searchData" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="选择订单上传日期" label-width="130px">
            <div style="display: flex">
              <el-date-picker
                style="margin-right: 40px"
                v-model="searchData.workArea"
                type="datetimerange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <el-button>今天</el-button>
              <el-button>本周</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="料单编号">
            <el-input
              v-model="searchData.name"
              placeholder="请输入料单编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="料单名称">
            <el-input
              v-model="searchData.name"
              placeholder="请输入料单名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="料单上传人">
            <el-input
              v-model="searchData.name"
              placeholder="请输入料单上传人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="料单上传时间">
            <el-date-picker
              style="width: 100%"
              v-model="searchData.workArea"
              type="datetimerange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="料单需要日期">
            <el-date-picker
              style="width: 100%"
              v-model="searchData.workArea"
              type="datetimerange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button>查询</el-button>
          <el-button>重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div>
      <div style="margin: 20px 0;font-weight: 400;font-size: 16px;color: #101010;">待下发料单数量总计：1份</div>

      <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="料单编号" align="center"></el-table-column>
        <el-table-column prop="name" label="分部分项" align="center"></el-table-column>
        <el-table-column prop="name" label="料单名称" align="center"></el-table-column>
        <el-table-column prop="name" label="料单重量(t)" align="center"></el-table-column>
        <el-table-column prop="name" label="料单上传人" align="center"></el-table-column>
        <el-table-column prop="date" label="料单上传时间" align="center"></el-table-column>
        <el-table-column label="料单需用日期" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="seeTable(scope.row)" style="color: red;">
              {{ scope.row.date }}<i class="el-icon-date" style="margin-left: 10px;"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="料单详情" align="center">
          <template v-slot="scope">
            <el-button size="mini" type="text" @click="seeTable(scope.row)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template v-slot="scope">
            <el-button size="mini" type="text" @click="issue(scope.row)">下发至加工厂</el-button>
            <el-button size="mini" type="text" @click="toVoid(scope.row)">作废</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <toVoid ref="toVoid" />
  </div>
</template>

<script>
import toVoid from '../dialog/to-void.vue'

export default {
  name: "ToBeIssued",
  components: { toVoid },
  props: {},
  data() {
    return {
      searchData: {},
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          value: '1'
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    seeTable(row) {
      console.log(row)
    },
    issue(row) {
      console.log(row)
    },
    toVoid(row) {
      console.log(row)
      this.$refs.toVoid.add()
    },
  },
};
</script>

<style scoped lang="scss"></style>
